<template>
  <div class="page-wrapper">
    <div class="content">
        <!-- 搜索区域 -->
        <div class="search">
          <el-button size="max" type="primary" @click="openDrawer=true">创建班级</el-button>
        </div>
        <!-- 表格区域 -->
        <el-table size="mini" :data="tableData" style="width: 99%">
          <el-table-column prop="id" label="班级编号" width="180" />
          <el-table-column prop="num" label="班级名称" width="180" />
          <el-table-column prop="count" label="班级人数" width="180" />
          <el-table-column prop="course" label="课程名称" width="180" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="mini" type="warning" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 抽屉区域 -->
        <el-drawer
            v-model="openDrawer"
            :title="isAdd?'添加班級':'修改班級'"
            direction="rtl"
            size="30%"
            :before-close="drawerClose"
        >
          <div>
            <span>班级名称：</span>
            <div><el-input size="mini" v-model="formData.num" placeholder="请输入班級名称" /></div>
          </div>
          <div>
            <span>班级人数：</span>
            <div><el-input size="mini" v-model="formData.count" placeholder="请输入班級人数" /></div>
          </div>
          <div>
            <span>课程名称：</span>
            <div><el-input size="mini" v-model="formData.course" placeholder="请输入课程名称" /></div>
          </div>
          <div>
            <span></span>
            <div>
              <el-button size="mini" type="primary" @click="editForm">{{isAdd?'添加':'修改'}}</el-button>
              <el-button size="mini" type="default" @click="clearFormData">取消</el-button>
            </div>
          </div>
        </el-drawer>
    </div>
  </div>
      </template>
      <script>
        import { reactive, toRefs } from "vue";
        import { list,add,update,del } from "@/api/viewclass";
        export default {
          name: "ClassManage",
          setup() {

            let data = reactive({

              tableData: [],

              openDrawer:false,

              isAdd:true,

              formData:{

                num:'',
                count:'',
                course:''
              }
            });


            let loadTable = async () => {
              let r = await list();
              data.tableData = r;
            };

            loadTable();


            let editForm = async ()=>{
              let r = false

              if(data.isAdd){
                r = await add(data.formData)
              }else{
                r = await update(data.formData)
              }

              if(r){

                loadTable();
              }
            }


            let clearFormData = ()=>{

              data.formData = {
                num:'',
                count:'',
                course:''
              }
            }


            let drawerClose = ()=>{

              data.openDrawer = false
              data.isAdd = true

              clearFormData()
            }


            let handleEdit = (row)=>{

              data.formData = {...row}

              data.isAdd = false

              data.openDrawer = true
            }


            let handleDelete = async (row)=>{

              let {id} = row
              let r = await del({id})

              if(r){

                loadTable();
              }
            }

            return {
              ...toRefs(data),
              editForm,
              drawerClose,
              handleEdit,
              handleDelete,
              clearFormData
            };
          },
        };
      </script>
      <style scoped lang="scss">

      </style>
